<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>App / Fbootstrapp by Clemens Krack, based on Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <script>
        // kill less cache
        localStorage.clear();
    </script>
    
    <!-- Le styles -->
    <link rel="stylesheet/less" href="../lib/bootstrap.less">
    <script src="../js/less-1.1.5.min.js"></script>

    <style type="text/css">
    body {padding: 20px 0;}
    </style>
    
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body>

    <div class="container">

<!-- HERO
================================================== -->
<section id="hero">    
  <!-- Main hero unit for a primary marketing message or call to action -->
  <div class="hero-unit">
    <h1>Hello, world!</h1>
    <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
    <p><a class="btn primary large">Learn more &raquo;</a></p>
  </div>

  <!-- Example row of columns -->
  <div class="row">
    <div class="span-one-third">
      <h2>Heading</h2>
      <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span-one-third">
      <h2>Heading</h2>
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
   </div>
    <div class="span-one-third">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div>
 </section>  

<!-- Media
================================================== -->
<section id="media">
  <div class="page-header">
    <h1>Media <small>Example thumbnails</small></h1>
  </div>
  <h2>Big</h2>
  <ul class="media-grid">
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/240x200" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/240x200" alt="">
      </a>
    </li>
  </ul>
  <h3>Medium</h3>
  <ul class="media-grid">
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/150x140" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/150x140" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/150x140" alt="">
      </a>
    </li>
  </ul>
  <h4>Small</h4>
  <ul class="media-grid">
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/105x80" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/105x80" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/105x80" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/105x80" alt="">
      </a>
    </li>
  </ul>
</section>



<!-- Tables
================================================== -->
<section id="tables">
  <div class="page-header">
    <h1>Tables <small>For, you guessed it, tabular data</small></h1>
  </div>
  
  <h2>Example: Default table styles</h2>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Language</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Some</td>
        <td>One</td>
        <td>English</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Joe</td>
        <td>Sixpack</td>
        <td>English</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Stu</td>
        <td>Dent</td>
        <td>Code</td>
      </tr>
    </tbody>
  </table>

  <h2>Example: Zebra-striped</h2>
  <table class="bordered-table zebra-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Language</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Some</td>
        <td>One</td>
        <td>English</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Joe</td>
        <td>Sixpack</td>
        <td>English</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Stu</td>
        <td>Dent</td>
        <td>Code</td>
      </tr>
      <tr>
        <td colspan="4">
          span 4 columns
        </td>
      </tr>
      <tr>
        <td colspan="2">
          span 2 columns
        </td>
        <td colspan="2">
          span 2 columns
        </td>
      </tr>
    </tbody>
  </table>
      
</section>



<!-- Forms
================================================== -->
<section id="forms">
  <div class="page-header">
    <h1>Forms</h1>
  </div>

  <form>
    <fieldset>
      <legend>Example form legend</legend>
      <div class="clearfix">
        <label for="xlInput">X-Large input</label>
        <div class="input">
          <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text">
        </div>
      </div><!-- /clearfix -->
      <div class="clearfix">
        <label for="normalSelect">Select</label>
        <div class="input">
          <select name="normalSelect" id="normalSelect">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>
      </div><!-- /clearfix -->
      <div class="clearfix error">
        <label for="errorInput">Input with error</label>
        <div class="input">
          <input class="xlarge error" id="errorInput" name="errorInput" size="30" type="text">
          <span class="help-inline">Small snippet of help text</span>
        </div>
      </div><!-- /clearfix -->
      <div class="clearfix success">
        <label for="successInput">Input with success</label>
        <div class="input">
          <input class="xlarge error" id="successInput" name="successInput" size="30" type="text">
          <span class="help-inline">Success!</span>
        </div>
      </div><!-- /clearfix -->
      <div class="clearfix warning">
        <label for="warningInput">Input with warning</label>
        <div class="input">
          <input class="xlarge error" id="warningInput" name="warningInput" size="30" type="text">
          <span class="help-inline">Ruh roh!</span>
        </div>
      </div><!-- /clearfix -->
    </fieldset>

    <fieldset>
      <legend>Example form legend</legend>
      <div class="clearfix">
        <label id="optionsCheckboxes">List of options</label>
        <div class="input">
          <ul class="inputs-list">
            <li>
              <label>
                <input type="checkbox" name="optionsCheckboxes" value="option1">
                <span>Option one is this and that—be sure to include why it’s great</span>
              </label>
            </li>
            <li>
              <label>
                <input type="checkbox" name="optionsCheckboxes" value="option2">
                <span>Option two can also be checked and included in form results</span>
              </label>
            </li>
            <li>
              <label>
                <input type="checkbox" name="optionsCheckboxes" value="option2">
                <span>Option three can—yes, you guessed it—also be checked and included in form results. Let's make it super long so that everyone can see how it wraps, too.</span>
              </label>
            </li>
            <li>
              <label class="disabled">
                <input type="checkbox" name="optionsCheckboxes" value="option2" disabled="">
                <span>Option four cannot be checked as it is disabled.</span>
              </label>
            </li>
          </ul>
          <span class="help-block">
            <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
          </span>
        </div>
      </div><!-- /clearfix -->
      <div class="clearfix">
        <label for="textarea">Textarea</label>
        <div class="input">
          <textarea class="xxlarge" id="textarea2" name="textarea2" rows="3"></textarea>
          <span class="help-block">
            Block of help text to describe the field above if need be.
          </span>
        </div>
      </div><!-- /clearfix -->
      <div class="clearfix">
        <label id="optionsRadio">List of options</label>
        <div class="input">
          <ul class="inputs-list">
            <li>
              <label>
                <input type="radio" checked="" name="optionsRadios" value="option1">
                <span>Option one is this and that—be sure to include why it’s great</span>
              </label>
            </li>
            <li>
              <label>
                <input type="radio" name="optionsRadios" value="option2">
                <span>Option two is something else and selecting it will deselect option 1</span>
              </label>
            </li>
          </ul>
        </div>
      </div><!-- /clearfix -->
      <div class="actions">
        <button class="btn primary">Primary</button>&nbsp;
        <button class="btn">Default</button>&nbsp;
        <button class="btn success">Success</button>&nbsp;
        <button class="btn danger">Danger</button>
      </div>
    </fieldset>
  </form>

</section>



<!-- Navigation
================================================== -->
<section id="navigation">
  <div class="page-header">
    <h1>Navigation</h1>
  </div>
  <ul class="tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Contact</a></li>
    <li class="dropdown" data-dropdown="dropdown">
      <a href="#" class="dropdown-toggle">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a href="#">Secondary link</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Another link</a></li>
      </ul>
    </li>
  </ul>
  <ul class="pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

  <ul class="breadcrumb">
    <li><a href="#">Home</a> <span class="divider">&gt;</span></li>
    <li><a href="#">Middle page</a> <span class="divider">&gt;</span></li>
    <li><a href="#">Another one</a> <span class="divider">&gt;</span></li>
    <li class="active">You are here</li>
  </ul>

  <div class="pagination">
    <ul>
      <li class="prev"><a href="#">← Previous</a></li>
      <li class="active"><a href="#">10</a></li>
      <li><a href="#">11</a></li>
      <li><a href="#">12</a></li>
      <li class="disabled"><a href="#">…</a></li>
      <li><a href="#">19</a></li>
      <li><a href="#">20</a></li>
      <li><a href="#">21</a></li>
      <li class="next"><a href="#">Next →</a></li>
    </ul>
  </div>

</section>



<!-- Alerts & Messages
================================================== -->
<section id="alerts">

  <div class="alert-message warning">
    <a class="close" href="#">×</a>
    <p><strong>Holy guacamole!</strong> Best check yo self, you’re not <a href="#">looking too good</a>.</p>
  </div>
  <div class="alert-message error">
    <a class="close" href="#">×</a>
    <p><strong>Oh snap!</strong> Change this and that and <a href="#">try again</a>.</p>
  </div>
  <div class="alert-message success">
    <a class="close" href="#">×</a>
    <p><strong>Well done!</strong> You successfully <a href="#">read this</a> alert message.</p>
  </div>
  <div class="alert-message info">
    <a class="close" href="#">×</a>
    <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not <a href="#">a huge priority</a> just yet.</p>
  </div>

  <div class="alert-message block-message warning">
    <a class="close" href="#">×</a>
    <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    <div class="alert-actions">
      <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
    </div>
  </div>
  <div class="alert-message block-message error">
    <a class="close" href="#">×</a>
    <p><strong>Oh snap! You got an error!</strong> Change this and that and <a href="#">try again</a>.</p>
    <ul>
      <li>Duis mollis est non commodo luctus</li>
      <li>Nisi erat porttitor ligula</li>
      <li>Eget lacinia odio sem nec elit</li>
    </ul>
    <div class="alert-actions">
      <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
    </div>
  </div>
  <div class="alert-message block-message success">
    <a class="close" href="#">×</a>
    <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
    <div class="alert-actions">
      <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
    </div>
  </div>
  <div class="alert-message block-message info">
    <a class="close" href="#">×</a>
    <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
    <div class="alert-actions">
      <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
    </div>
  </div>

</section>


  <footer>
    <p>&copy; Company 2011</p>
  </footer>

  </div> <!-- /container -->

  </body>
</html>
